<template>
  <div class="check-detail-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Document /></el-icon>
          <div class="header-text">
            <h2>盘点单详情</h2>
            <p>{{ sheetDetail.sheetNo }}</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button @click="handleBack">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
          <el-button type="primary" @click="handlePrint">
            <el-icon><Printer /></el-icon>
            打印
          </el-button>
          <el-button type="success" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 盘点单基本信息 -->
    <el-card shadow="never" class="info-section">
      <div class="section-title">
        <el-icon><InfoFilled /></el-icon>
        <span>基本信息</span>
      </div>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="盘点单号">
          <el-tag type="primary" size="large">{{ sheetDetail.sheetNo }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="关联任务单">
          <el-link type="primary" v-if="sheetDetail.taskNo">{{ sheetDetail.taskNo }}</el-link>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="盘点状态">
          <el-tag :type="getStatusTagType(sheetDetail.status)" size="large">
            {{ getStatusName(sheetDetail.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="盘点仓库">{{ sheetDetail.warehouseName }}</el-descriptions-item>
        <el-descriptions-item label="盘点人">{{ sheetDetail.checkPerson }}</el-descriptions-item>
        <el-descriptions-item label="盘点时间">{{ sheetDetail.checkTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ sheetDetail.createTime }}</el-descriptions-item>
        <el-descriptions-item label="审核人">{{ sheetDetail.approver || '-' }}</el-descriptions-item>
        <el-descriptions-item label="审核时间">{{ sheetDetail.approveTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="3">
          {{ sheetDetail.remark || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 盈亏汇总 -->
    <el-card shadow="never" class="summary-section">
      <div class="section-title">
        <el-icon><DataAnalysis /></el-icon>
        <span>盈亏汇总</span>
      </div>
      <div class="summary-grid">
        <div class="summary-item">
          <div class="summary-label">商品总数</div>
          <div class="summary-value">{{ sheetDetail.totalItems }}</div>
        </div>
        <div class="summary-item profit">
          <div class="summary-label">盘盈数量</div>
          <div class="summary-value profit-value">+{{ profitQty }}</div>
        </div>
        <div class="summary-item loss">
          <div class="summary-label">盘亏数量</div>
          <div class="summary-value loss-value">{{ lossQty }}</div>
        </div>
        <div class="summary-item">
          <div class="summary-label">盈亏数量</div>
          <div class="summary-value" :class="getDiffClass(sheetDetail.totalDiffQty)">
            {{ sheetDetail.totalDiffQty > 0 ? '+' : '' }}{{ sheetDetail.totalDiffQty }}
          </div>
        </div>
        <div class="summary-item profit">
          <div class="summary-label">盘盈金额</div>
          <div class="summary-value profit-value">+¥{{ profitAmount.toFixed(2) }}</div>
        </div>
        <div class="summary-item loss">
          <div class="summary-label">盘亏金额</div>
          <div class="summary-value loss-value">¥{{ Math.abs(lossAmount).toFixed(2) }}</div>
        </div>
        <div class="summary-item highlight">
          <div class="summary-label">净盈亏金额</div>
          <div class="summary-value" :class="getDiffClass(sheetDetail.totalDiffAmount)">
            {{ sheetDetail.totalDiffAmount > 0 ? '+' : '' }}¥{{ Math.abs(sheetDetail.totalDiffAmount).toFixed(2) }}
          </div>
        </div>
      </div>
    </el-card>

    <!-- 盘点明细 -->
    <el-card shadow="never" class="detail-section">
      <div class="section-title">
        <el-icon><List /></el-icon>
        <span>盘点明细</span>
        <div class="title-actions">
          <el-radio-group v-model="viewType" size="small">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="profit">仅盘盈</el-radio-button>
            <el-radio-button label="loss">仅盘亏</el-radio-button>
            <el-radio-button label="balance">账实相符</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-table :data="filteredDetailItems" border stripe max-height="600">
        <el-table-column type="index" label="序号" width="60" fixed />
        <el-table-column prop="productCode" label="商品编码" width="150" fixed />
        <el-table-column prop="productName" label="商品名称" min-width="200" show-overflow-tooltip />
        <el-table-column prop="spec" label="规格" width="150" />
        <el-table-column prop="unit" label="单位" width="80" align="center" />
        <el-table-column prop="bookQty" label="账面数量" width="120" align="right">
          <template #default="{ row }">
            <span class="book-qty">{{ row.bookQty }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="actualQty" label="实盘数量" width="120" align="right">
          <template #default="{ row }">
            <span class="actual-qty">{{ row.actualQty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="盈亏数量" width="120" align="right">
          <template #default="{ row }">
            <span :class="getDiffClass(row.diffQty)" class="diff-qty">
              {{ row.diffQty > 0 ? '+' : '' }}{{ row.diffQty }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价" width="120" align="right">
          <template #default="{ row }">
            ¥{{ row.unitPrice.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="盈亏金额" width="150" align="right">
          <template #default="{ row }">
            <span :class="getDiffClass(row.diffAmount)" class="diff-amount">
              {{ row.diffAmount > 0 ? '+' : '' }}¥{{ Math.abs(row.diffAmount).toFixed(2) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
      </el-table>
    </el-card>

    <!-- 操作日志 -->
    <el-card shadow="never" class="log-section">
      <div class="section-title">
        <el-icon><Clock /></el-icon>
        <span>操作日志</span>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(log, index) in operationLogs"
          :key="index"
          :timestamp="log.time"
          placement="top"
          :type="log.type"
        >
          <div class="log-content">
            <div class="log-header">
              <span class="log-action">{{ log.action }}</span>
              <span class="log-operator">操作人：{{ log.operator }}</span>
            </div>
            <div class="log-desc">{{ log.desc }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Document, Back, Printer, Download, InfoFilled, DataAnalysis,
  List, Clock
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 视图类型
const viewType = ref('all')

// 盘点单详情
const sheetDetail = ref({
  id: route.query.id || 1,
  sheetNo: 'CHS202401150001',
  taskNo: 'CHK202401150001',
  warehouseId: 1,
  warehouseName: '主仓库',
  status: 'approved',
  checkPerson: '张三',
  checkTime: '2024-01-15 14:30:00',
  approver: '李四',
  approveTime: '2024-01-15 16:00:00',
  totalItems: 5,
  totalDiffQty: -12,
  totalDiffAmount: -69498,
  remark: '年度全盘任务的第一批盘点',
  createTime: '2024-01-15 08:30:00'
})

// 盘点明细
const detailItems = ref([
  {
    productCode: 'P001',
    productName: 'iPhone 15 Pro Max 256GB',
    spec: '256GB 深空黑',
    unit: '台',
    bookQty: 100,
    actualQty: 95,
    diffQty: -5,
    unitPrice: 9999,
    diffAmount: -49995,
    remark: '发现破损2台，丢失3台'
  },
  {
    productCode: 'P002',
    productName: 'MacBook Pro 14寸 M3',
    spec: '14寸 16GB 512GB',
    unit: '台',
    bookQty: 50,
    actualQty: 48,
    diffQty: -2,
    unitPrice: 14999,
    diffAmount: -29998,
    remark: '账实不符，原因待查'
  },
  {
    productCode: 'P003',
    productName: 'AirPods Pro 2',
    spec: '第二代',
    unit: '副',
    bookQty: 200,
    actualQty: 205,
    diffQty: 5,
    unitPrice: 1899,
    diffAmount: 9495,
    remark: '发现未入库商品5副'
  },
  {
    productCode: 'P004',
    productName: 'iPad Air 5',
    spec: '10.9寸 WiFi 64GB',
    unit: '台',
    bookQty: 80,
    actualQty: 70,
    diffQty: -10,
    unitPrice: 4799,
    diffAmount: -47990,
    remark: '部分商品移库未记录'
  },
  {
    productCode: 'P005',
    productName: 'Apple Watch Series 9',
    spec: '45mm GPS',
    unit: '块',
    bookQty: 60,
    actualQty: 60,
    diffQty: 0,
    unitPrice: 3199,
    diffAmount: 0,
    remark: '账实相符'
  }
])

// 操作日志
const operationLogs = ref([
  {
    time: '2024-01-15 16:00:00',
    type: 'success',
    action: '审核通过',
    operator: '李四',
    desc: '审核通过，准予调整库存'
  },
  {
    time: '2024-01-15 15:00:00',
    type: 'primary',
    action: '提交审核',
    operator: '张三',
    desc: '盘点完成，提交审核'
  },
  {
    time: '2024-01-15 14:30:00',
    type: 'primary',
    action: '完成盘点',
    operator: '张三',
    desc: '录入完成，盈亏数量：-12，盈亏金额：-¥69,498'
  },
  {
    time: '2024-01-15 09:00:00',
    type: 'info',
    action: '开始盘点',
    operator: '张三',
    desc: '开始录入盘点数据'
  },
  {
    time: '2024-01-15 08:30:00',
    type: 'info',
    action: '创建盘点单',
    operator: '系统',
    desc: '关联任务单：CHK202401150001'
  }
])

// 计算属性
const filteredDetailItems = computed(() => {
  if (viewType.value === 'all') {
    return detailItems.value
  } else if (viewType.value === 'profit') {
    return detailItems.value.filter(item => item.diffQty > 0)
  } else if (viewType.value === 'loss') {
    return detailItems.value.filter(item => item.diffQty < 0)
  } else if (viewType.value === 'balance') {
    return detailItems.value.filter(item => item.diffQty === 0)
  }
  return detailItems.value
})

const profitQty = computed(() => {
  return detailItems.value
    .filter(item => item.diffQty > 0)
    .reduce((sum, item) => sum + item.diffQty, 0)
})

const lossQty = computed(() => {
  return detailItems.value
    .filter(item => item.diffQty < 0)
    .reduce((sum, item) => sum + item.diffQty, 0)
})

const profitAmount = computed(() => {
  return detailItems.value
    .filter(item => item.diffAmount > 0)
    .reduce((sum, item) => sum + item.diffAmount, 0)
})

const lossAmount = computed(() => {
  return detailItems.value
    .filter(item => item.diffAmount < 0)
    .reduce((sum, item) => sum + item.diffAmount, 0)
})

// 方法
const handleBack = () => {
  router.back()
}

const handlePrint = () => {
  window.print()
}

const handleExport = () => {
  ElMessage.success('导出功能开发中')
}

const getStatusName = (status) => {
  const map = {
    pending: '待盘点',
    checking: '盘点中',
    completed: '已完成',
    approved: '已审核'
  }
  return map[status] || status
}

const getStatusTagType = (status) => {
  const map = {
    pending: 'info',
    checking: 'warning',
    completed: '',
    approved: 'success'
  }
  return map[status] || ''
}

const getDiffClass = (value) => {
  if (value > 0) return 'profit-text'
  if (value < 0) return 'loss-text'
  return ''
}
</script>

<style scoped>
.check-detail-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.info-section,
.summary-section,
.detail-section,
.log-section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4e7ed;
}

.title-actions {
  margin-left: auto;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.summary-item {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.summary-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-item.profit {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-color: #b7eb8f;
}

.summary-item.loss {
  background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
  border-color: #ffadd2;
}

.summary-item.highlight {
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  border-color: #91d5ff;
}

.summary-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.summary-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.summary-value.profit-value {
  color: #67C23A;
}

.summary-value.loss-value {
  color: #F56C6C;
}

.book-qty {
  color: #606266;
}

.actual-qty {
  color: #409EFF;
  font-weight: 500;
}

.diff-qty,
.diff-amount {
  font-weight: 600;
}

.profit-text {
  color: #67C23A;
}

.loss-text {
  color: #F56C6C;
}

.log-content {
  padding: 8px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.log-action {
  font-weight: 600;
  color: #303133;
}

.log-operator {
  font-size: 13px;
  color: #909399;
}

.log-desc {
  font-size: 14px;
  color: #606266;
}

@media print {
  .header-actions,
  .title-actions,
  .log-section {
    display: none !important;
  }
}
</style>

